<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <img src="@/assets/gile1.jpeg" style="width:300px" />
    <fieldset>
      <legend>登录状态</legend>
      <div>{{loginStatus}}</div>
    </fieldset>
    <br />
    <br />
    <button @click="login">login</button>
    <button @click="checkLogin">check login</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      loginStatus: ''
    }
  },
  created () {
    this.checkLogin()
  },
  methods: {
    login () {
      axios({
        method: 'post',
        url: '/api-proxy/login',
        data: {
          name: 'kate',
          pwd: 'good'
        }
      })
    },
    checkLogin () {
      axios({
        method: 'post',
        url: '/api-proxy/login-test',
        headers:{token:'hhhh'}
      }).then((res) => {
        this.loginStatus = res.data.loginStatus
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only &&&&&&&&&&&-->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
